<template>
  <div class="yuanzhu_page">
    <Menus title="法律援助" />
    <div class="yuanzhu_content">
      <ul>
        <li>
          <a href="#"><img src="static/img/icon/diagram/edit.png" alt="">
            <p>申请办理</p>
          </a>
        </li>
        <li>
          <a href="#"><img src="static/img/icon/diagram/question.png" alt="">
            <p>法援须知</p>
          </a>
        </li>
        <li>
          <a href="#"><img src="static/img/icon/diagram/date.png" alt="">
            <p>预约办理</p>
          </a>
        </li>
        <li>
          <a href="#"><img src="static/img/icon/diagram/search.png" alt="">
            <p>进度查询</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Menus from '../components/Menu.vue'
export default {
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.yuanzhu_page {
  padding-top: 160px;
  .yuanzhu_content {
    padding: 100px 100px 0;
    ul {
      display: flex;
      width: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      list-style: none;
      padding: 0;
      li {
        width: 33.3%;
        margin-bottom: 120px;
        &:last-child {
          margin-bottom: 0;
        }
        a {
          display: block;
          width: 160px;
          margin: auto;
          &:hover,
          &:active,
          &:link,
          &:visited {
            text-decoration: none;
          }
        }
        img {
          margin-bottom: 20px;
        }
        p {
          font-size: 28px;
          text-align: center;
          color: #333;
        }
      }
    }
  }
}
</style>
